<template>
	<app-layout>
		<view class="detail" v-if="loading">
			<view>
				<app-quick-navigation></app-quick-navigation>
			</view>
			<view class="goods-banner">
				<app-goods-banner
						:picList="detail.pic_url"
						:share="detail.share"
						:isCart="false"
						:videoUrl="detail.video_url"
						:goods_id="detail.id"
						sign="advance"
				></app-goods-banner>
			</view>
			<view class="detail-ad" v-if="detail.advanceGoods.end_prepayment_at">
				<detail-ad :sales="detail.sales"
				           :d="d"
				           :h="h"
				           :m="m"
				           :s="s"
				></detail-ad>
			</view>
			
			<!-- 详情标题 -->
			<view class="goods-name">
				<app-name :name="detail.name"></app-name>
			</view>	

			<view class="price-share" v-if="detail.attr.length > 0">
				<detail-price-share
						:url="url"
						:original_price="detail.original_price"
						:attr="detail.attr"
						:price_min="detail.price_min"
						:price_max="detail.price_max"
						:group_max_member_price="detail.group_max_member_price"
						:group_min_member_price="detail.group_min_member_price"
						:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
						:pay_limit="detail.advanceGoods.pay_limit"
						:level_show="detail.level_show"
						:cats="detail.goodsWarehouse.cats"
						:ids="detail.id"
						:is_vip_card_user="detail.vip_card_appoint.is_vip_card_user"
						:discount="detail.vip_card_appoint.discount"
				></detail-price-share>
			</view>
			<view class="join-member" v-if="detail.level_show == 2">
				<app-join-member
						:member-min-price="`${detail.group_min_member_price}`"
						:member-max-price="`${detail.group_min_member_price}`"
						:price="`${detail.original_price}`"
				></app-join-member>
			</view>
			<view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
				<app-vip-card
					top="0"
					background="#fff"
				></app-vip-card>
			</view>
			<view class="detail-discount" v-if="detail.advanceGoods.ladder_rules.length>0">
				<detail-discount :url="url"
					:ladder_rules="detail.advanceGoods.ladder_rules"
					             :sales="detail.sales"
				></detail-discount>
			</view>
			<view class="goods-service" v-if="detail.services.length>0" >
				<app-goods-service :list="detail.services" :border="false"></app-goods-service>
			</view>
			<view class="select-attr" @click="active = false">
				<app-goods-attr
						:selectAttr="{attr_list: select_attr_group}"
						:attr-groups="detail.attr_groups">
				</app-goods-attr>
			</view>
			<view class="app-goods-marketing">
				<app-goods-marketing :express="item.express"></app-goods-marketing>
			</view>
			<view class="goods-detail">
				<app-goods-detail :goods="detail"></app-goods-detail>
			</view>
			<view class="detail-attr" v-if="!active && detail.attr.length>0">
				<detail-attr
						:height="Number(110)"
						:cover_pic="detail.cover_pic"
						:attr="detail.attr"
						:attr_groups="detail.attr_groups"
						:goods_stock="detail.goods_stock"
						:attr_deposit="attr_deposit"
						:attr_swell_deposit="attr_swell_deposit"
						:attr_stock="attr_stock"
						:attr_price="attr_price"
						:attr_price_member="attr_price_member"
						:level_show="detail.level_show"
						:attr_pic_url="attr_pic_url"
						@select_attr="select_attr"
						@close_attr="close_attr"
						:num="num"
						:detail="detail"
						@change_num="change_num"
						@change_num_data="change_num_data"
				></detail-attr>
			</view>

			<!-- 相关推荐 -->
			<view class="app-recommend">
				<app-related-suggestion-product text="您或许会喜欢" sign="advance"  :list="list"></app-related-suggestion-product>
			</view>

			<!-- 空白格 -->
			<view>
				<app-empty-bottom :height="Number(110)"></app-empty-bottom>
			</view>

			<view class="app-button">
				<app-iphone-x>
					<view slot="empty-area">
						<detail-bottom-button 
							@close_attr="close_attr"
							:favorite="detail.favorite"
							:active="active"
							:goods_id="detail.id"
							@favorite="favorite"
							:detail="detail"
							:num="num"
							:end_prepayment_at="detail.advanceGoods.end_prepayment_at"
							@request="request_detail"
						></detail-bottom-button>
					</view>
				</app-iphone-x>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {mapGetters} from'vuex';
	import {mapState} from'vuex';
    import appGoodsBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import detailAd from '../components/detail-ad.vue';
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
	import detailPriceShare from '../components/detail-price-share.vue';
	import detailBottomButton from '../components/detail-bottom-button.vue';
    import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
	import detailAttr from '../components/detail-attr.vue';
    import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
	import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue'
    import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import detailDiscount from '../components/detail-discount.vue';
	import detailVip from '../components/detail-vip.vue';
	import appVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
	import appName from '../../../components/page-component/app-goods-detail/app-name.vue';

    import appQuickNavigation from '../../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
	import appGoodsAttr from '../../../components/page-component/goods/app-goods-attr.vue';
    import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';
	
    export default {
        name: "detail",
	    data() {
            return {
                detail: {},
                active: true,
	            attr_deposit: '0',
	            attr_swell_deposit: '0',
	            attr_stock: 0,
                attr_price: '0',
                attr_price_member: 0,
	            url: '',
                level_show: 0,
	            loading: false,
	            select_attr_group: [],
                zhe: false,
                list: [],
	            num: 1,
                shareShow: false,
                attr_pic_url: '',
                goods_id: -1,
                d: 0,
                h: 0,
                m: 0,
                s: 0,
                end_time: -1,
            }
	    },
		onLoad(data) {
            this.goods_id = data.id;
	    },
	    onShow() {
            this.$nextTick(() => {
				this.request_detail({id: this.goods_id});
				this.$request({
					url: this.$api.advance.goods_list,
					data: {
						goods_id: this.goods_id,
					}
            	}).then(response => {
					if (response.code === 0) {
						this.list = response.data.list;
					} else if (response.code === 1) {
						uni.showModal({
							title: '提示',
							content: response.msg,
						});
					}
            	});
			})
	    },
	    onHide() {
            clearInterval(this.end_time);
	    },
        onUnload() {
            clearInterval(this.end_time);
        },
	    methods: {
            request_detail(data) {
                uni.showLoading({
	                title: '加载中',
                });
                this.$request({
                    url: this.$api.advance.detail,
                    data: {
                        id: data.id,
                    },
                    method: 'get',
                }).then(res => {
                    if (res.code === 0) {
                        uni.hideLoading();
                        this.detail = res.data.detail;
                        this.detail.num = 1;
                        this.loading = true;
                        this.url = `${this.$api.advance.poster}&goods_id=${this.detail.id}`;
                        this.getTime(this.detail.advanceGoods.end_prepayment_at);
                        this.set_attr_active();
                    } else if (res.code === 1) {
                        uni.showModal({
                            title: '提示',
                            content: res.msg,
                        });
                    }
                });
            },
            open_share() {
                this.shareShow = true;
            },
            change_num(data) {
                this.num += data;
            },
            change_num_data(data) {
                this.num = data;
            },
            favorite(data) {
                this.detail.favorite = data;
            },
            select_attr(data, item) {
                let attr_groups = this.detail.attr_groups;
                let str = ':';
                let sd = 0;
                for (let i = 0; i < attr_groups.length;i++) {
                    let attr_list = this.detail.attr_groups[i].attr_list;
                    for (let j = 0; j < attr_list.length; j++) {
                        if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id === item) {
                            this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
                        } else if (attr_groups[i].attr_group_id === data && attr_list[j].attr_id !== item){
                            this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
                        }
                        if (this.detail.attr_groups[i].attr_list[j].active) {
                            sd = this.detail.attr_groups[i].attr_list[j].attr_id;
                            str += `:${sd}`;
                        }
                    }
                }
                let result = str.substr(2);
                this.get_price_stock(result);
            },
		    set_attr_active() {
                let item = 0;
                let str = ':';
                for (let i = 0; i < this.detail.attr_groups.length;i++) {
                    for (let j = 0; j < this.detail.attr_groups[i].attr_list.length; j++) {
                        if (j !== 0) {
                            this.$set(this.detail.attr_groups[i].attr_list[j], 'active', false);
                        } else if (j === 0) {
                            item = this.detail.attr_groups[i].attr_list[j].attr_id;
                            str += `:${item}`;
                            this.$set(this.detail.attr_groups[i].attr_list[j], 'active', true);
                        }
                    }
                }
                this.get_price_stock(str.substr(2));
            },
		    get_price_stock(data) {
                let attr = this.detail.attr;
                for (let i = 0; i < attr.length;i++) {
                    if (attr[i].sign_id === data) {
                        this.select_attr_group = attr[i].attr_list;
                        let { deposit, swell_deposit, stock, price, price_member, pic_url } = attr[i];
                        this.attr_deposit = deposit;
                        this.attr_swell_deposit = swell_deposit;
                        this.attr_stock = stock;
                        this.attr_price = price;
                        this.attr_price_member = price_member;
                        this.attr_pic_url = pic_url
                    }
                }
		    },
            close_attr(data) {
                this.active = data;
            },
		    getTime(end_prepayment_at) {
                let time = new Date(end_prepayment_at.replace(/-/g, '/')).getTime() - (new Date()).getTime();
                console.log(end_prepayment_at);
                this.d = parseInt((time/1000/60/60/24));
                this.h = parseInt((time/1000/60/60)%24);
                this.m = parseInt((time/1000/60)%60);
                this.s = parseInt((time/1000)%60);
                this.end_time = setInterval(() => {
                    let now = new Date().getTime();
                    let timelog = new Date(end_prepayment_at.replace(/-/g, '/')).getTime();
                    let time = timelog - now;
                    if (time > 0) {
                        let day = parseInt((time/1000/60/60/24));
                        let hou = parseInt((time/1000/60/60)%24);
                        let min = parseInt((time/1000/60)%60);
                        let sec = parseInt((time/1000)%60);
                        this.d = day;
                        this.h = hou;
                        this.m = min;
                        this.s = sec;
                    } else {
                        clearInterval(this.end_time);
                    }
                }, 1000);
		    },
	    },
        components: {
            'app-goods-banner': appGoodsBanner,
	        'detail-ad': detailAd,
            'app-iphone-x': appIphoneX,
            'app-goods-detail': appGoodsDetail,
	        'detail-price-share': detailPriceShare,
	        'detail-bottom-button': detailBottomButton,
            'app-empty-bottom': appEmptyBottom,
	        'detail-attr': detailAttr,
            'app-join-member': appJoinMember,
	        'app-goods-service': appGoodsService,
            'app-related-suggestion-product': appRelatedSuggestionProduct,
	        'detail-discount': detailDiscount,
	        'detail-vip': detailVip,
			'app-name': appName,
	        'app-vip-card': appVipCard,
            'app-quick-navigation': appQuickNavigation,
	        'app-goods-attr': appGoodsAttr,
			'app-goods-marketing': appGoodsMarketing,
        },
	    computed: {
            ...mapGetters('mallConfig',{
	           vip: 'getVip'
            }),
		    ...mapGetters('user', {
                is_vip: 'is_vip'
		    }),
            ...mapState({
                mall: state => state.mallConfig.mall,
            })
	    },
        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/plugins/advance/detail/detail',
                title: this.detail.app_share_title ? this.detail.app_share_title : this.detail.name,
                imageUrl: this.detail.app_share_pic ? this.detail.app_share_pic : '',
                params: {
                    id: this.detail.id,
                }
            });
        },
    }
</script>

<style scoped lang="scss">
	
	.join-member {
		background-color: #ffffff;
		padding: 0 #{24rpx};
		box-sizing: border-box;
	}
	.border-top {
		border-top: #{1rpx} solid #e2e2e2;
	}
	.select-attr {
		width: #{750rpx};
		line-height: #{100rpx};
		background-color: white;
		font-size: #{26rpx};
		margin: #{20rpx 0};
		.a-s {
			height: #{100rpx};
			line-height: #{100rpx};
			display: inline-block;
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
		}
		>image {
			width: #{12rpx};
			height: #{22rpx};
		}
	}
	.zhe {
		height: #{80rpx};
		background-color: white;
		width: #{750rpx};
		padding: 0 #{24rpx};
		margin-top: #{20rpx};
		.symbol {
			width: #{116rpx};
			font-size: #{20rpx};
			color: #ff4544;
			border: #{1rpx} solid #ff4544;
			border-radius: #{4rpx};
			text-align: center;
		}
		.image {
			width: #{12rpx};
			height: #{22rpx};
		}
		.content {
			width: #{520rpx};
			font-size: #{21rpx};
			color: #666666;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-left: #{12rpx};
		}
	}
	.detail-discount {
		margin: #{20rpx 0};
	}
	.goods-service {
		margin-top: #{20rpx};
	}
	.detail-vip {
		margin-bottom: #{10upx};
	}
</style>